<script setup>
import { onMounted, ref } from 'vue'
import { getAuditListApi } from '@/api/vehicle'
import parseTime from '@/utils/time'

const tableData = ref([])
const setTableData = async () => {
  const res = await getAuditListApi()
  tableData.value = res.data
}

onMounted(() => {
  setTableData()
})
</script>

<template>
  <div class="table-area">
    <el-table size="default" stripe :data="tableData">
      <el-table-column label="车辆名称" prop="name" />
      <el-table-column label="品牌/分类" width="130" prop="brandName" />
      <el-table-column label="购买时间" prop="registerDate" />
      <el-table-column label="留言">
        <template #default="scope">
          <span>{{ scope.row.vehicleMarket.leaveMessage }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交易地址/学校" width="260">
        <template #default="scope">
          <span>{{
            scope.row.vehicleMarket?.tradeAddr || scope.row.campusOrShopDto.name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="100">
        <template #default="scope">
          <span>{{ scope.row.vehicleMarket.currentPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="200" align="center">
        <template #default="scope">
          <span style="color: #d6a2e8">{{
            parseTime(scope.row.vehicleAudit.commitTime)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <span class="oprate" style="position: relative; left: -5px"
            ><el-link
              type="primary"
              @click.prevent="
                $router.push(`/audit/auditVehicle/${scope.row.id}`)
              "
              >审批</el-link
            ></span
          >
          <!-- <span class="oprate"><el-link type="primary">驳回</el-link></span> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="scss" scoped>
.oprate {
  text-align: center;
  padding: 5px 0;
  margin-left: 10px;
  line-height: 40px;
}

.table-area {
  min-height: 600px;
  padding: 30px 25px;
  background-color: #fff;
}
</style>
